<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Tools HandleBar Guidelines</title>

	<script type="text/javascript" src="js/handlebars-v4.0.2.js"></script>
	<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
</head>
<body>
<div class="header">
	Header
</div>
<div class="content">
	Body

</div>
<div class="footer">
	Footer
</div>
<script id="simple-template" type="text/x-handlebars-template">
	<div class="entry">
		<h1>{{title}}</h1>

		<div class="body">
			{{body}}
		</div>
	</div>
</script>
<script id="list-template" type="text/x-handlebars-template">
	{{#list people}}
	{{firstName}}
	{{lastName}}
	{{/list}}
</script>
<script id="list-people" type="text/x-handlebars-template">
	<ul class="people_list">
		{{#each people}}
		<li>{{this}}</li>
		{{/each}}
	</ul>
</script>
<script>
	var simpleSource = $("#simple-template").html();
	var simpleTemplate = Handlebars.compile(simpleSource);
	var simpleContext = {
		title: "My New Post",
		body: "This is my first post!"
	};
	var simpleHtml = simpleTemplate(simpleContext);
	$('.content').append(simpleHtml);

	Handlebars.registerHelper('list', function (items, options)
	{
		var out = "<ul>";

		for (var i = 0, l = items.length; i < l; i++)
		{
			out = out + "<li>" + options.fn(items[i]) + "</li>";
		}
		out = out + "</ul>";
		return out;
	});

	var listSource = $('#list-template').html();
	var listTemplate = Handlebars.compile(listSource);
	var listContext = {
		people: [
			{firstName: "Yehuda", lastName: "Katz"},
			{firstName: "Carl", lastName: "Lerche"},
			{firstName: "Alan", lastName: "Johnson"}
		]
	};
	var listHtml = listTemplate(listContext);
	$('.content').append(listHtml);

	var peopleListSource = $('#list-people').html();
	var peopleTemplate = Handlebars.compile(peopleListSource);
	var peopleContext = {
		people: [
			"Yehuda Katz",
			"Alan Johnson",
			"Charles Jolley"
		]
	};
	var peopleHtml = peopleTemplate(peopleContext);
	$('.content').append(peopleHtml);
</script>
</body>
</html>